<template>
  <div class="body-bg">
    <el-form :model="loginForm" :rules="rules" ref="loginForm" @submit.native.prevent label-position="left"
             label-width="0px" class="demo-ruleForm login-container">
      <h3 class="title">
        <img src="../../static/image/logo.png">
        刘兴红后台管理系统
      </h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"
                  prefix-icon="el-icon-user"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"
                  prefix-icon="el-icon-lock"></el-input>
      </el-form-item>
        <el-form-item prop="code" >
          <div  style="display: inline-block;width: 100%">
            <el-input
              v-model="loginForm.captcha"
              auto-complete="off"
              placeholder="验证码"
              style="width: 63%;"
              align="left"
              @keyup.enter.native="handleLogin"
            >
              <!--<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
            </el-input>
            <div class="login-code" style="width: 26%" align="right">
              <img :src="codeUrl" class="login-code-img" @click="getCode">
            </div>
          </div>

        </el-form-item>
        <!--<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;background-color: slateblue;border-color:#35B178;"
                   @click.native.prevent="handleSubmit" native-type="submit" :loading="landing">登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<!--suppress BadExpressionStatementJS -->
<script type="text/ecmascript-6">
import {requestLogin, captcha} from '../api/login'
import {Message} from 'element-ui'

export default {
  name: 'Login',
  data () {
    return {
      landing: false,
      loginForm: {
        username: '',
        password: '',
        captcha: '',
        captchakey: ''
      },

      /* 校验规则 */
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      },
      checked: true,
      codeUrl: '',
      captchakey: ''
    }
  },
  methods: {
    handleSubmit (ev) {
      // var _this = this
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.landing = true
          var loginParams = {
            grant_type: 'password',
            captchakey: this.captchakey,
            captcha: this.loginForm.captcha,
            username: this.loginForm.username,
            password: this.loginForm.password
          }
          requestLogin(loginParams).then(res => {
            this.landing = false
            // 保存数据
            localStorage.setItem('currentUser', JSON.stringify(res.user))// 用户数据和路由菜单数据
            localStorage.setItem('token', res.token_type + ' ' + res.access_token) // 保存token
            this.$router.push({path: '/main'}) // 登陆成功，跳转路由
            this.getCode()
          }).catch(err =>{
            this.landing = false
            Message({
              message: err.response.data.msg,
              type: 'error'
            })
            this.getCode()
          })
        } else {
          this.$message({
            message: '请检查用户名或密码',
            type: 'error'
          })
          return false
        }
      })
    },
    // 获取验证码
    getCode() {
      captcha().then(res => {
        this.codeUrl =  res.data.image
        this.captchakey = res.captchakey
      })
    }
  },
  mounted() {
    this.getCode()
  }
}
</script>

<style lang="scss" scoped>
  @function rw($px) {
    @return $px*100/1920 *1vw;
  }

  @function rh($px) {
    @return $px*100/1080 *1vh;
  }

  .body-bg {
    width: rw(1920);
    height: rh(1080);
    background: url("../../static/image/bg-2.jpg") no-repeat;
    background-size: 100% 100%;
    position: absolute;
  }

  .login-container {
    position: absolute;
    width: 350px;
    height: 250px;
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    /*right: rw(370);*/
    /*width: rw(340);*/
    left: 50%;
    top: 50%;;
    transform: translate(50%, -25%);
    padding: 50px 30px;
    background: #fff;
    /*top:rh(356);*/
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    opacity: 0.9;

    .title {
      font-size: rh(22);
      font-weight: bold;
      margin: 0px auto 40px auto;
      text-align: left;
      color: #3655b1;

      > img {
        border-radius: 50%;
        border: 2px solid lightgrey;
        height: rh(70);
        width: rh(70);
        vertical-align: middle;
      }
    }
  }
  .login-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .login-code-img {
    height: 38px;
  }
</style>
